<template>
  <a-popover
    trigger="click"
    v-model="visible"
    overlayClassName="one-level-menu-popover"
    :destroyTooltipOnHide="true"
  >
    <div class="popover-target-container" v-if="data.length > 1">
      <div class="name">{{ system.menuName }}</div>
      <a-icon type="down" :class="visible && 'rotate'" />
    </div>
    <div slot="content" class="popover-drow-container">
      <div class="popover-drow-header">业务中心</div>
      <div class="popover-drow-body">
        <div
          class="line-item"
          :class="data.length <= 5 && 'center'"
          v-for="(item, index) in splitArr(data, 5)"
          :key="index"
        >
          <div
            class="menu-list"
            :class="
              system.menuCode == menu.menuCode &&
              !['HOME_PAGE', 'PAGE_TODO'].includes(currentMenu.menuCode) &&
              'active'
            "
            v-for="menu in item"
            :key="menu.menuCode"
            @click="chooseSystem(menu)"
          >
            {{ menu.menuName }}
          </div>
        </div>
      </div>
    </div>
  </a-popover>
</template>
<script>
/**
 *
 * 子系统面板
 *
 * */
import { splitArr, flatTreeData } from "@/utils";
import { mapGetters } from "vuex";
import { saveData, getMenuData, isEmptyObject } from "@/tools";
export default {
  name: "subsystemPanel",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    ...mapGetters(["system", "currentMenu"]),
  },
  watch: {
    data: {
      handler(val) {
        let nums = val.length;
        // saveData("SERVICE_SOURCE", []);
        if (nums == 0) {
          saveData("SYSTEM", { $$INIT: false });
        } else {
          //只有一个子系统
          if (nums == 1) {
            saveData("SYSTEM", { ...val[0], $$INIT: false });
          } else {
            saveData("SYSTEM", { menuName: "业务中心", $$INIT: true });
          }
        }
      },
      deep: true,
    },

    system: {
      handler(val) {
        let { $$INIT } = val;
        if (!$$INIT) {
          this.getServiceData();
          this.getDataBoard();
          saveData("CURRENT_MENU", getMenuData(0));
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  mounted() {},
  methods: {
    //选择子系统
    chooseSystem(menu = {}) {
      saveData("SYSTEM", { ...menu, $$INIT: false });
      this.getServiceData();
      this.getDataBoard();
      this.visible = false;
    },

    //查询数据看板数据
    getDataBoard() {
      let flatData = flatTreeData([this.system], "childs");
      let dataBoard =
        flatData.find((v) => (v.menuCode ?? "").endsWith("HOME_PAGE")) || {};
      saveData("DATA_BOARD", dataBoard);
    },

    //查询业务数据列表
    getServiceData() {
      let flatData = flatTreeData([this.system], "childs");
      let { childs = [] } = flatData.find((v) =>
        (v.menuCode ?? "").endsWith("SJCK")
      ) || {
        childs: [],
      };
      saveData("SERVICE_SOURCE", childs);
    },

    //指定【a-popover】挂载的 HTML 节点
    getContainer() {
      return document.getElementById("page-header-container");
    },

    //数组分割
    splitArr,
  },
};
</script>
<style lang="less">
.popover-target-container {
  width: 100%;
  height: 100%;
  padding: 0 42px 0 20px;
  width: 210px;
  transition: 0.2s;
  cursor: pointer;
  .flex();
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  overflow: hidden;
  position: relative;
  &.active {
    background: #005ba0;
  }
  .name {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 12px;
  }
  .anticon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    font-size: 12px;
    transition: 0.2s;
    &.rotate {
      transform: rotate(-180deg);
      margin-top: -7px;
    }
  }
}

.one-level-menu-popover {
  .ant-popover-inner-content {
    padding: 0 !important;
    .popover-drow-container {
      min-width: 250px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      .popover-drow-header {
        height: 58px;
        border-bottom: 1px solid #e8e8e8;
        margin: 0 20px;
        .flex();
        align-items: center;
        flex-shrink: 0;
        font-size: 16px;
        font-weight: bold;
      }
      .popover-drow-body {
        .flex();
        justify-content: center;
        padding: 10px 20px;
        .line-item {
          margin-left: 20px;
          flex: 1;
          &:first-child {
            margin-left: 0;
          }
          .menu-list {
            color: #666;
            font-size: 14px;
            height: 40px;
            margin-bottom: 10px;
            width: 152px;
            .flex();
            align-items: center;
            padding: 0 20px;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.2s;
            &:not(.active):hover {
              text-decoration: underline;
            }
            &.active {
              background: #005ba0;
              color: #fff;
            }
          }
          &.center {
            .menu-list {
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
</style>
